<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background:url("images/grassland.png");
        }

        img {
            position: fixed;
            left: 500px;
            top: 400px;
        }
    </style>
</head>

<body>
<img src="images/right.png" alt="">
<script>
    // 获取图片
    var Oimg = document.querySelector('img')
    // 获取图片的属性
    var style = getComputedStyle(Oimg)
    // 记录图片的初始位置
    var L = parseInt(style.left)
    var T = parseInt(style.top)
    // 绑定键盘按下事件
    window.onkeydown = function(e) {
        console.log(e.key);
        // 判断方向键
        switch(e.key) {
            // 按下上方向键
            case 'ArrowUp':
                // 改变图片的src地址，控制转向
                Oimg.src = 'images/up.png'
                // 目标位置 = 初始位置 - 每次移动距离（这里设为10px）
                T = T - 10
                // 改变图片的top距离，控制移动
                Oimg.style.top = T + 'px'
                break;
            case 'ArrowDown':
                Oimg.src = 'images/down.png'
                T = T + 10
                Oimg.style.top = T + 'px'
                break;
            case 'ArrowLeft':
                Oimg.src = 'images/left.png'
                L = L - 10
                Oimg.style.left = L + 'px'
                break;
            case 'ArrowRight':
                Oimg.src = 'images/right.png'
                L = L + 10
                Oimg.style.left = L + 'px'
                break;
        }
    }
    document.addEventListener('mousemove',function (e) {
        var x=e.pageX;
        var y=e.pageY;
        pic.style.left=x-50+'px';
        pic.style.top=y-40+'px';
    });
    window.document.oncontextmenu = function(){
        return false;
    }
</script>
</body>

</html>